<template>
	<view style="background-color: #f5f5f5;min-height: 100vh;">
		<headerSlotVue :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header_slot flex justify-start align-center" @click="closePage()">
					<view class="action" style="margin-right: 20rpx;">
						<text class="cuIcon-back "></text>
					</view>
					<view class="content text-bold">
						我的订单
					</view>
				</view>
			</template>
		</headerSlotVue>

		<!-- 状态标签栏 -->
		<view class="scroll_view">
			<scroll-view scroll-x class="bg-white nav" style="padding: 24rpx 0;">
				<view class="flex text-center ">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
						v-for="(item,index) in tabList" :key="item.id" @tap="tabSelect" :data-id="index">
						{{item.title}}
						<text class="act_line" v-if="index==TabCur"></text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 订单列表 -->
		<view class="placeOreder_com" style="padding-top:140rpx ;">
			<view class="shoppingCart_box">
				<!-- 空状态 -->
				<view v-if="orderList.length === 0 && !isLoading" class="empty-state">
					<view class="empty-icon">
						<text class="cuIcon-form"></text>
					</view>
					<text class="empty-text">暂无订单</text>
					<text class="empty-subtext">快去选购心仪的商品吧</text>
					<button class="go-shopping-btn" @click="goShopping">去购物</button>
				</view>

				<!-- 订单卡片 -->
				<view class="cu-card" v-for="orderItem in orderList" :key="orderItem._id">
					<view class="cu-item shadow order-card">
						<!-- 订单头部 -->
						<view class="order-header" @click="goPage(orderItem)">
							<view class="order-info">
								<view class="order-no">
									<text class="label">订单编号:</text>
									<text class="value">{{orderItem.orderNo}}</text>
								</view>
								<view class="order-time">
									<text class="time">{{formatTime(orderItem.createdAt)}}</text>
								</view>
							</view>
							<view class="order-status">
								<text :class="'status-text status-' + orderItem.status">
									{{getStatusText(orderItem.status)}}
								</text>
								<!-- 帮送服务状态显示 -->
								<text v-if="hasRelatedDeliveryOrder(orderItem)" class="delivery-status-text">
									{{getDeliveryStatusText(orderItem)}}
								</text>

							</view>
						</view>

						<!-- 店铺信息 -->
						<view class="shop-info" v-if="orderItem.shop" @click="goPage(orderItem)">
							<view class="shop-avatar">
								<image :src="orderItem.shop.avatar || '/static/logo-orange.png'" mode="aspectFill">
								</image>
							</view>
							<view class="shop-details">
								<text class="shop-name">{{orderItem.shop.name}}</text>
								<text class="shop-address">{{orderItem.shop.address}}</text>
							</view>
							<view class="shop-arrow">
								<text class="cuIcon-right"></text>
							</view>
						</view>

						<!-- 商品列表 -->
						<view class="products-section" @click="goPage(orderItem)">
							<view class="product-item" v-for="product in orderItem.products" :key="product._id">
								<view class="product-image">
									<image :src="product.productImage" mode="aspectFill"></image>
								</view>
								<view class="product-info">
									<view class="product-name">{{product.productName}}</view>
									<view class="product-spec" v-if="product.specification">
										{{product.specification}}
									</view>
									<view class="product-price-qty">
										<text class="product-price">￥{{product.price}}</text>
										<text class="product-qty">x{{product.quantity}}</text>
									</view>
								</view>
							</view>
						</view>

						<!-- 配送信息 -->
						<view class="delivery-info" v-if="orderItem.addDeliveryService" @click="goPage(orderItem)">
							<view class="delivery-icon">
								<text class="cuIcon-deliver"></text>
							</view>
							<view class="delivery-text">
								<text class="delivery-label">送货上门服务</text>
								<text class="delivery-fee">服务费: ￥{{orderItem.deliveryServiceFee}}</text>
							</view>
						</view>

						<!-- 订单金额 -->
						<view class="order-amount" @click="goPage(orderItem)">
							<view class="amount-details">
								<view class="amount-item">
									<text class="label">商品总额:</text>
									<text class="value">￥{{orderItem.totalAmount}}</text>
								</view>
								<view class="amount-item" v-if="orderItem.addDeliveryService">
									<text class="label">配送费:</text>
									<text class="value">￥{{orderItem.deliveryServiceFee}}</text>
								</view>
								<view class="amount-item total">
									<text class="label">实付金额:</text>
									<text class="value">￥{{orderItem.payAmount}}</text>
								</view>
							</view>
						</view>

						<!-- 订单操作 -->
						<view class="order-actions">
							<view class="action-buttons">
								<button class="action-btn primary" v-if="orderItem.status === 'pending'"
									@click.stop="handlePay(orderItem)">
									去支付
								</button>
								<button class="action-btn danger"
									v-if="orderItem.status === 'paid' || orderItem.status === 'pending'"
									@click.stop="handleCancelOrder(orderItem)">
									取消订单
								</button>
								<button class="action-btn primary"
									v-if="orderItem.status === 'shipped' || orderItem.status === 'received'"
									@click.stop="handleConfirmReceive(orderItem)">
									确认收货
								</button>
								<button class="action-btn outline" @click.stop="goPage(orderItem)">
									查看详情
								</button>
							</view>
						</view>
					</view>
				</view>

				<!-- 加载更多 -->
				<view v-if="orderList.length > 0" class="load-more">
					<text v-if="noMoreData" class="no-more-text">没有更多订单了</text>
					<text v-else class="loading-text">加载中...</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerSlotVue from '@/components/header-slot.vue';
	import {
		getProductOrderList,
		cancelProductOrder,
		receiveProductOrder
	} from "@/api/productOrder.js"

	export default {
		components: {
			headerSlotVue,
		},
		data() {
			return {
				pages: {
					page: 1,
					limit: 10,
				},
				noMoreData: false,
				totalPages: 0,
				TabCur: 0,
				scrollLeft: 0,
				orderList: [],
				status: '',
				isLoading: false,
				tabList: [{
					id: 0,
					title: '全部',
					status: ''
				}, {
					id: 1,
					title: '待支付',
					status: 'pending'
				}, {
					id: 2,
					title: '待发货',
					status: 'paid'
				}, {
					id: 3,
					title: '已发货',
					status: 'shipped'
				}, {
					id: 4,
					title: '已送达',
					status: 'received'
				}, {
					id: 5,
					title: '已完成',
					status: 'completed',
				}, {
					id: 6,
					title: '已取消',
					status: 'cancelled',
				}, ]
			};
		},
		onLoad() {
			this.initOrderList()
		},
		onPullDownRefresh() {
			this.orderList = []
			this.pages = {
				page: 1,
				limit: 10
			}
			this.noMoreData = false
			this.initOrderList()
		},
		// 监听页面滚动到底部
		onReachBottom() {
			if (!this.noMoreData && !this.isLoading) {
				this.pages.page++;
				this.initOrderList()
			}
		},
		methods: {
			initOrderList() {
				this.isLoading = true;
				getProductOrderList({
					...this.pages,
					status: this.status
				}).then(res => {
					if (res.data.code === 200) {
						const newMessages = res.data.data.list;
						const total = res.data.data.total;

						// 如果是第一页，直接替换列表；否则追加到列表
						if (this.pages.page === 1) {
							this.orderList = newMessages;
						} else {
							this.orderList = [...this.orderList, ...newMessages];
						}

						this.totalPages = Math.ceil(total / this.pages.limit);
						this.noMoreData = this.pages.page >= this.totalPages;
					} else {
						uni.showToast({
							title: res.data.message || '加载失败',
							icon: 'error'
						});
					}
					uni.stopPullDownRefresh();
				}).catch(error => {
					console.error('加载订单列表失败:', error);
					uni.showToast({
						title: '加载失败',
						icon: 'error'
					});
					uni.stopPullDownRefresh();
				}).finally(() => {
					this.isLoading = false;
				});
			},

			goPage(item) {
				// 跳转到订单详情页面
				this.$router.smartNavigate({
					url: '/pages/mePages/orderDetail?id=' + item._id + '&type=product'
				});
			},

			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.status = this.tabList[this.TabCur].status
				this.orderList = []
				this.pages = {
					page: 1,
					limit: 10
				}
				this.noMoreData = false
				this.initOrderList()
			},

			closePage() {
				uni.redirectTo({
					url: "/pages/tabBar/mine"
				})
			},

			getStatusText(status) {
				const statusMap = {
					pending: '等待支付',
					paid: '已支付',
					shipped: '已发货',
					received: '已送达', // 新增：已送达状态
					completed: '已完成',
					cancelled: '已取消'
				};
				return statusMap[status] || '未知状态';
			},

			formatTime(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},

			goShopping() {
				this.$router.smartNavigate({
					url: '/pages/homePages/sam/samPurchase'
				});
			},

			/**
			 * 处理支付
			 */
			handlePay(orderItem) {
				this.$router.smartNavigate({
					url: '/pages/mePages/orderDetail?id=' + orderItem._id + '&type=product'
				});
			},

			/**
			 * 处理取消订单
			 */
			handleCancelOrder(orderItem) {
				uni.showModal({
					title: '取消订单',
					content: '确定要取消这个订单吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								uni.showLoading({
									title: '取消中...'
								});

								// 这里需要调用取消订单的API
								await cancelProductOrder(orderItem._id, '用户主动取消');

								uni.hideLoading();
								uni.showToast({
									title: '订单已取消',
									icon: 'success'
								});

								// 刷新订单列表
								this.orderList = [];
								this.pages = {
									page: 1,
									limit: 10
								};
								this.noMoreData = false;
								this.initOrderList();
							} catch (error) {
								console.error('取消订单失败:', error);
								uni.hideLoading();
								uni.showToast({
									title: '取消订单失败',
									icon: 'error'
								});
							}
						}
					}
				});
			},

			/**
			 * 处理确认收货
			 */
			async handleConfirmReceive(orderItem) {
				uni.showModal({
					title: '确认收货',
					content: '确认已收到商品吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								uni.showLoading({
									title: '处理中...'
								});

								// 调用确认收货API
								const response = await receiveProductOrder(orderItem._id);

								uni.hideLoading();

								if (response.data.code === 200) {
									uni.showToast({
										title: '确认收货成功',
										icon: 'success'
									});
									// 显示状态同步通知
									this.showStatusSyncNotification(orderItem);
									// 刷新订单列表
									this.orderList = [];
									this.pages = {
										page: 1,
										limit: 10
									};
									this.noMoreData = false;
									this.initOrderList();
								} else {
									uni.showToast({
										title: response.data.message || '确认收货失败',
										icon: 'none'
									});
								}
							} catch (error) {
								console.error('确认收货失败:', error);
								uni.hideLoading();
								uni.showToast({
									title: '确认收货失败，请重试',
									icon: 'none'
								});
							}
						}
					}
				});
			},

			/**
			 * 判断是否有相关的帮送服务订单
			 */
			hasRelatedDeliveryOrder(orderItem) {
				return orderItem.addDeliveryService && orderItem.deliveryServiceFee > 0;
			},

			/**
			 * 获取帮送服务状态文本
			 */
			getDeliveryStatusText(orderItem) {
				// 根据商品订单状态推断帮送服务状态
				const productStatus = orderItem.status;
				const deliveryStatusMap = {
					'shipped': '配送中',
					'received': '已送达',
					'completed': '已完成'
				};

				return deliveryStatusMap[productStatus] || '待接单';
			},

			/**
			 * 检查订单状态同步
			 * 根据文档中的状态对应关系检查订单状态是否同步
			 */
			checkOrderStatusSync(orderItem) {
				if (!this.hasRelatedDeliveryOrder(orderItem)) {
					return true; // 没有帮送服务，认为同步
				}

				const productOrderStatus = orderItem.status;
				// 根据文档中的状态对应关系进行检查
				const expectedSync = {
					'shipped': true, // 商品已发货，帮送订单应该在配送中
					'received': true, // 商品已送达，帮送订单应该已送达
					'completed': true // 商品已完成，帮送订单应该已完成
				};

				return expectedSync[productOrderStatus] || false;
			},

			/**
			 * 获取订单状态同步提示信息
			 */
			getStatusSyncTip(orderItem) {
				if (!this.hasRelatedDeliveryOrder(orderItem)) {
					return '';
				}

				const productOrderStatus = orderItem.status;
				const syncTips = {
					'shipped': '帮送订单正在配送中',
					'received': '帮送订单已送达，请确认收货',
					'completed': '帮送订单已完成'
				};

				return syncTips[productOrderStatus] || '';
			},

			/**
			 * 显示订单状态同步通知
			 */
			showStatusSyncNotification(orderItem) {
				if (!this.hasRelatedDeliveryOrder(orderItem)) {
					return;
				}

				const productOrderStatus = orderItem.status;

				// 根据状态变更显示相应的通知
				if (productOrderStatus === 'received') {
					uni.showToast({
						title: '帮送订单已送达，请确认收货',
						icon: 'none',
						duration: 3000
					});
				} else if (productOrderStatus === 'completed') {
					uni.showToast({
						title: '订单已完成，帮送服务已结算',
						icon: 'success',
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll_view {
		position: fixed;
		width: 100%;
		z-index: 10;
		border-bottom: 1px solid #eee;
	}

	.header_slot {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
	}

	.flex-sub {
		font-weight: 400;
		font-size: 32rpx;
		color: #555C67;
		text-align: center;
	}

	.cur {
		position: relative;
		font-weight: 800;
		font-size: 36rpx;
		color: #2C2622;
	}

	.nav .cu-item.cur {
		border: 0;
	}

	.act_line {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 36rpx;
		height: 6rpx;
		background: #FE6100;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
	}

	.shoppingCart_box {
		padding: 12rpx 0;
	}

	// 空状态样式
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		text-align: center;

		.empty-icon {
			width: 120rpx;
			height: 120rpx;
			background: #F5F5F5;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;

			text {
				font-size: 60rpx;
				color: #999;
			}
		}

		.empty-text {
			font-size: 36rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 20rpx;
		}

		.empty-subtext {
			font-size: 28rpx;
			color: #999;
			margin-bottom: 60rpx;
		}

		.go-shopping-btn {
			background: linear-gradient(135deg, #FF6B35 0%, #FE6100 50%, #FF8A00 100%);
			color: white;
			border: none;
			border-radius: 40rpx;
			padding: 20rpx 48rpx;
			font-size: 28rpx;
			font-weight: 600;
			box-shadow: 0 8rpx 24rpx rgba(254, 97, 0, 0.3);
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
				transition: left 0.5s;
			}

			&:active::before {
				left: 100%;
			}

			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 4rpx 12rpx rgba(254, 97, 0, 0.4);
			}
		}
	}

	// 订单卡片样式
	.order-card {
		margin: 12rpx 32rpx;
		border-radius: 20rpx;
		background: white;
		overflow: hidden;
	}

	// 订单头部
	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 32rpx 24rpx 24rpx;
		border-bottom: 1px solid #f5f5f5;

		.order-info {
			flex: 1;

			.order-no {
				margin-bottom: 12rpx;

				.label {
					font-size: 28rpx;
					color: #666;
					margin-right: 12rpx;
				}

				.value {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}

			.order-time {
				.time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.order-status {
			.status-text {
				font-size: 28rpx;
				font-weight: 500;
				padding: 8rpx 16rpx;
				border-radius: 20rpx;

				&.status-pending {
					color: #FF6B35;
					background: #FFF2ED;
				}

				&.status-paid {
					color: #52C41A;
					background: #F6FFED;
				}

				&.status-shipped {
					color: #1890FF;
					background: #F0F9FF;
				}

				&.status-received {
					color: #722ED1;
					background: #F9F0FF;
				}

				&.status-completed {
					color: #52C41A;
					background: #F6FFED;
				}

				&.status-cancelled {
					color: #999;
					background: #F5F5F5;
				}
			}

			.delivery-status-text {
				font-size: 24rpx;
				color: #999;
				margin-left: 10rpx;
			}

			.sync-tip {
				font-size: 22rpx;
				color: #ffd700;
				margin-top: 8rpx;
				display: block;
			}
		}
	}

	// 店铺信息
	.shop-info {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #FAFAFA;
		margin: 0 24rpx;
		border-radius: 12rpx;

		.shop-avatar {
			width: 60rpx;
			height: 60rpx;
			margin-right: 16rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.shop-details {
			flex: 1;

			.shop-name {
				font-size: 30rpx;
				color: #333;
				font-weight: 500;
				display: block;
				margin-bottom: 8rpx;
			}

			.shop-address {
				font-size: 24rpx;
				color: #999;
				display: block;
			}
		}

		.shop-arrow {
			color: #999;
			font-size: 24rpx;
		}
	}

	// 商品列表
	.products-section {
		padding: 24rpx;

		.product-item {
			display: flex;
			align-items: flex-start;
			margin-bottom: 24rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.product-image {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				border-radius: 12rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.product-info {
				flex: 1;

				.product-name {
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
					line-height: 1.4;
					margin-bottom: 12rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.product-spec {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 12rpx;
				}

				.product-price-qty {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.product-price {
						font-size: 32rpx;
						color: #FF2E44;
						font-weight: 600;
					}

					.product-qty {
						font-size: 28rpx;
						color: #666;
					}
				}
			}
		}
	}

	// 配送信息
	.delivery-info {
		display: flex;
		align-items: center;
		padding: 20rpx 24rpx;
		background: #F8F9FA;
		margin: 0 24rpx 24rpx;
		border-radius: 12rpx;

		.delivery-icon {
			color: #1890FF;
			font-size: 32rpx;
			margin-right: 16rpx;
		}

		.delivery-text {
			flex: 1;

			.delivery-label {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				display: block;
				margin-bottom: 8rpx;
			}

			.delivery-fee {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	// 订单金额
	.order-amount {
		padding: 24rpx;
		border-top: 1px solid #f5f5f5;

		.amount-details {
			.amount-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 16rpx;

				&:last-child {
					margin-bottom: 0;
				}

				&.total {
					border-top: 1px solid #f0f0f0;
					padding-top: 16rpx;
					margin-top: 16rpx;

					.label,
					.value {
						font-size: 32rpx;
						font-weight: 600;
					}

					.value {
						color: #FF2E44;
					}
				}

				.label {
					font-size: 28rpx;
					color: #666;
				}

				.value {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}
		}
	}

	// 订单操作
	.order-actions {
		padding: 24rpx;
		border-top: 1px solid #f5f5f5;

		.action-buttons {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap: 16rpx;
			flex-wrap: nowrap;

			.action-btn {
				min-width: 120rpx;
				height: 64rpx;
				padding: 0 24rpx;
				border-radius: 32rpx;
				font-size: 26rpx;
				font-weight: 600;
				border: none;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				position: relative;
				overflow: hidden;
				white-space: nowrap;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
					transition: left 0.5s;
				}

				&:active::before {
					left: 100%;
				}

				&.primary {
					background: linear-gradient(135deg, #FF6B35 0%, #FE6100 50%, #FF8A00 100%);
					color: white;
					box-shadow: 0 4rpx 16rpx rgba(254, 97, 0, 0.25);

					&:active {
						transform: translateY(1rpx);
						box-shadow: 0 2rpx 8rpx rgba(254, 97, 0, 0.35);
					}
				}

				&.secondary {
					background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
					color: #495057;
					border: 1px solid #DEE2E6;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

					&:active {
						transform: translateY(1rpx);
						background: linear-gradient(135deg, #E9ECEF 0%, #DEE2E6 100%);
					}
				}

				&.outline {
					background: transparent;
					color: #1890FF;
					border: 2rpx solid #1890FF;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(24, 144, 255, 0.05) 100%);
						border-radius: 32rpx;
						opacity: 0;
						transition: opacity 0.3s ease;
					}

					&:active::after {
						opacity: 1;
					}

					&:active {
						transform: translateY(1rpx);
						box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.15);
					}
				}

				&.danger {
					background: linear-gradient(135deg, #FF4D4F 0%, #FF7875 100%);
					color: white;
					box-shadow: 0 4rpx 16rpx rgba(255, 77, 79, 0.25);

					&:active {
						transform: translateY(1rpx);
						box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.35);
					}
				}
			}
		}
	}

	// 加载更多
	.load-more {
		text-align: center;
		padding: 40rpx;

		.no-more-text,
		.loading-text {
			font-size: 28rpx;
			color: #999;
		}
	}

	// 兼容旧样式
	.goods_img {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.goods_img image {
		border-radius: 20rpx;
	}

	.goods_title {
		font-weight: 700;
		font-size: 32rpx;
		color: #000;
		line-height: 40rpx;
	}

	.goods_pire {
		margin-top: 20rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #FF2E44;
		line-height: 46rpx;
	}

	.goods_num {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.style-pending {
		color: red;
	}

	.style-paid {
		color: green;
	}

	.style-shipped {
		color: green;
	}

	.style-received {
		color: green;
	}

	.style-completed {
		color: green;
	}

	.style-cancelled {
		color: #8f939c;
	}
</style>